<template>
  <transition name="el-fade-in">
    <div v-if="flag">
      <!-- 遮罩层 -->
      <div class="lse_create_api_mask" @click="close"></div>
      <!-- 内容 -->
      <div class="lse_create_api_body">
          <el-collapse v-model="selected" style="padding:10px">
                <el-collapse-item title="接口名称" name="1">
                    <el-input v-model="apiInfo.name" size="mini" maxlength="50" show-word-limit></el-input>
                </el-collapse-item>
                <el-collapse-item title="HTTP URL" name="2">
                    <el-input v-model="apiInfo.url" size="mini" maxlength="500" show-word-limit></el-input>
                </el-collapse-item>
                <el-collapse-item title="Method" name="3">
                    <Select v-model="apiInfo.method" :value="apiInfo.method">
                        <Option v-for="(item, i) in elOptions"
                        :key="i"
                        :label="item.label"
                        :value="item.value">
                        </Option>
                    </Select>
                </el-collapse-item>
                <el-collapse-item title="Param" name="4">
                    <div style="text-align:right">
                        <el-button size="mini" icon="el-icon-plus" @click="publicDialog.flag = true;
                        publicDialog.title = '添加参数';publicDialog.type = 'addParam'"></el-button>
                    </div>
                    <el-table
                        :data="params" size="mini"
                        border
                        style="width: 100%;margin-top:10px">
                        <el-table-column type="expand">
                        <template slot-scope="param">
                            <el-form label-position="top" inline class="demo-table-expand">
                            <el-form-item label="参数名称：" style="width:100%">
                                <el-input size="mini" v-model="param.row.paramName" maxlength="20" show-word-limit></el-input>
                            </el-form-item>
                            <el-form-item label="参数类型：" style="width:100%">
                              <el-input size="mini" v-model="param.row.paramType" maxlength="10" show-word-limit></el-input>
                            </el-form-item>
                            <el-form-item label="是否必须：" style="width:100%">
                                <Select v-model="param.row.isMust" :value="param.row.isMust">
                                    <Option :value="1">是</Option>
                                    <Option :value="0">否</Option>
                                </Select>
                            </el-form-item>
                            <el-form-item label="参数备注：" style="width:100%">
                              <el-input
                                  type="textarea"
                                  :autosize="{ minRows: 5}"
                                  maxlength="4000" show-word-limit
                                  v-model="param.row.paramNote" size="mini">
                                  </el-input>
                            </el-form-item>
                            </el-form>
                        </template>
                        </el-table-column>
                        <el-table-column
                        prop="paramName"
                        width="200"
                        label="参数名称">
                        </el-table-column>
                        <el-table-column
                        prop="paramType"
                        label="参数类型">
                        </el-table-column>
                        <el-table-column
                        prop="isMust"
                        label="是否必须">
                        </el-table-column>
                        <el-table-column
                        prop="paramNote"
                        width="250"
                        label="参数备注">
                        </el-table-column>
                        <el-table-column
                            label="操作"
                            width="50">
                            <template slot-scope="scope">
                                <el-button type="text" size="small" @click.native.prevent="deleteParam(scope.$index, scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-collapse-item>
                <el-collapse-item title="Success" name="5">
                  <div style="text-align:right;margin-bottom:10px">
                    <el-button @click="dataView(apiInfo.success)" size="mini">show</el-button>
                  </div>
                    <el-input
                        type="textarea"
                        :autosize="{ minRows: 5}"
                        maxlength="4000" show-word-limit
                        v-model="apiInfo.success">
                        </el-input>
                </el-collapse-item>
                <el-collapse-item title="Failure" name="6">
                  <div style="text-align:right;margin-bottom:10px">
                    <el-button @click="dataView(apiInfo.success)" size="mini">show</el-button>
                  </div>
                    <el-input
                        type="textarea"
                        maxlength="4000" show-word-limit
                        :autosize="{ minRows: 5}"
                        v-model="apiInfo.failure">
                        </el-input>
                </el-collapse-item>
                <el-collapse-item title="备注" name="7">
                    <el-input
                        type="textarea"
                        :rows="3"
                        maxlength="800" show-word-limit
                        v-model="apiInfo.note">
                        </el-input>
                </el-collapse-item>
                </el-collapse>
                <!-- 功能操作区 -->
                <div style="margin: 20px 0;text-align:right">
                    <el-button size="mini" @click="createApi">提交</el-button>
                </div>
        </div>
        <!-- 附加组件 -->
        <!-- 弹窗 -->
        <transition name="el-fade-in">
            <div v-show="publicDialog.flag">
                <div class="lse_api_modal_mask" @click="publicDialog.flag = false"></div>
                <div class="lse_api_modal">
                    <div style="text-align:right" >
                    <i class="el-icon-close" @click="publicDialog.flag = false"></i>
                    </div>
                    <div style="text-align:center">
                        <b>{{publicDialog.title}}</b>
                    </div>
                    <!-- 内容 -->
                    <div>
                        <div v-if="publicDialog.type === 'addParam'">
                            <el-form label-position="top">
                            <el-form-item label="参数名称" style="width:100%">
                                <el-input v-model="param.paramName" size="mini" maxlength="20" show-word-limit></el-input>
                            </el-form-item>
                            <el-form-item label="参数类型【默认String】" style="width:100%">
                                <el-input v-model="param.paramType" size="mini" maxlength="10" show-word-limit></el-input>
                            </el-form-item>
                            <el-form-item label="是否必须" style="width:100%">
                                <Select v-model="param.isMust" :value="param.isMust">
                                    <Option :value="1">是</Option>
                                    <Option :value="0">否</Option>
                                </Select>
                            </el-form-item>
                            <el-form-item label="参数备注" style="width:100%">
                                <el-input
                                    type="textarea"
                                    :autosize="{ minRows: 5}"
                                    maxlength="4000" show-word-limit
                                    v-model="param.paramNote">
                                    </el-input>
                            </el-form-item>
                            </el-form>
                            <div style="text-align:right">
                                <el-button size="mini" @click="addParam">添加</el-button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </transition>
    </div>
  </transition>
</template>

<script>
// 1.2 新增数据展示页面
import DATAVIEW from '../util/data_view'
export default {
  name: 'create_api',
  data () {
    return {
      flag: false,
      apiInfo: {
        method: 'unlimited'
      },
      selected: ['1', '2', '3', '4', '8'],
      projectId: '',
      publicDialog: {
        flag: false,
        title: '',
        type: ''
      },
      param: {
        isMust: 1,
        paramType: 'String'
      },
      params: [],
      elOptions: [{
        value: 'unlimited',
        label: '无限制'
      }, {
        value: 'GET',
        label: 'GET'
      }, {
        value: 'POST',
        label: 'POST'
      }, {
        value: 'PUT',
        label: 'PUT'
      }, {
        value: 'PATCH',
        label: 'PATCH'
      }, {
        value: 'DELETE',
        label: 'DELETE'
      }, {
        value: 'COPY',
        label: 'COPY'
      }, {
        value: 'HEAD',
        label: 'HEAD'
      }, {
        value: 'OPTIONS',
        label: 'OPTIONS'
      }, {
        value: 'LINK',
        label: 'LINK'
      }, {
        value: 'UNLINK',
        label: 'UNLINK'
      }, {
        value: 'PURGE',
        label: 'PURGE'
      }, {
        value: 'LOCK',
        label: 'LOCK'
      }, {
        value: 'UNLOCK',
        label: 'UNLOCK'
      }, {
        value: 'PROPFIND',
        label: 'PROPFIND'
      }, {
        value: 'VIEW',
        label: 'VIEW'
      }],
      getProjectApiList: Function
    }
  },
  methods: {
    close () {
      this.flag = false
    },
    addParam () {
      let paramx = this.objCopy()
      if (paramx.paramName) {
        this.params.push(paramx)
      } else {
        this.lseutil.msg({
          msg: '请输入参数名称'
        })
      }
    },
    deleteParam (index, obj) {
      this.params.splice(index, 1)
    },
    objCopy () {
      let paramx = {}
      for (let par in this.param) {
        paramx[par] = this.param[par]
      }
      return paramx
    },
    createApi () {
      let loading = this.lseutil.loading('正在创建')
      this.apiInfo.params = this.params
      this.apiInfo.projectId = this.projectId
      this.lseajax.post(this.lseajax.baseurl + '/api/project/createApi', this.apiInfo, true).then((data) => {
        if (data.code === 200) {
          this.lseutil.msg({
            msg: data.msg
          })
          if (this.getProjectApiList !== undefined) {
            this.getProjectApiList()
          }
          this.close()
        } else {
          this.lseutil.msg({
            msg: data.msg
          })
        }
        loading.close()
      }).catch(res => {
        loading.close()
      })
    },
    dataView (data) {
      DATAVIEW.show({
        data: data
      })
    }
  },
  created () {
  }
}
</script>

<style scoped>

.lse_create_api_mask{
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background:rgba(0, 0, 0, 0.5);
    z-index: 9999;
}
.lse_create_api_body{
    height: 80%;
    width: 80%;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    overflow: auto;
    background: white;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
    z-index: 10000;
    border-radius: 5px;
    padding: 10px;
}
.lse_api_modal_mask{
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background:rgba(0, 0, 0, 0.5);
    z-index: 10001;
}
.lse_api_modal{
    height: 70%;
    width: 70%;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    overflow: auto;
    background: white;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
    z-index: 10002;
    border-radius: 5px;
    padding: 10px;
}
</style>
